<!--
 * @Author: hutong huareu980@163.com
 * @Date: 2023-06-01 22:10:29
 * @LastEditors: hutong huareu980@163.com
 * @LastEditTime: 2023-06-14 09:46:07
 * @FilePath: /smart-web-app/components/content.vue
 * @Description: 
-->
<template>
  <div class="page-layout">
    <div class="page-layout__left">
      <h2>{{ title }}</h2>
      <ul>
        <li
          :class="{ 'left-active': item.id === current }"
          v-for="item in list"
          :key="item.id"
        >
          <NuxtLink
            :to="localePath(`/content/${item.pid}/${item.id}`, locale)"
            >{{ item.title }}</NuxtLink
          >
        </li>
      </ul>
    </div>
    <div class="page-layout__right">
      <img
        :src="getItem.images[0]"
        alt=""
        v-if="getItem && getItem.images && getItem.images.length"
      />
      <slot name="content" :scoped="getItem">
        <div v-html="getContent"></div>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
const { locale } = useI18n();
const localePath = useLocalePath();
interface PropsType {
  modelValue?: string | number;
  title: string;
  list?: Array<{
    id: string;
    title: string;
    content: string;
    images: Array<any>;
    pid: number;
  }>;
}
const props = withDefaults(defineProps<PropsType>(), {
  modelValue: "",
  title: "",
  list: () => [],
});
const current = ref();

const getItem = computed(() => {
  const oItem = props.list.find((item) => item.id === current.value);
  return oItem ?? undefined;
});
const getContent = computed(() => {
  const oItem = props.list.find((item) => item.id === current.value);
  return oItem?.content ?? "";
});

watch(
  () => props.modelValue,
  (nVal: number | string) => {
    current.value = nVal;
  },
  {
    immediate: true,
  }
);
const emit = defineEmits(["update:modelValue"]);

const onClick = (id: string) => {
  current.value = id;
  emit("update:modelValue", current.value);
};
</script>
<style scoped lang="scss">
ul,
li {
  list-style: none;
}
.page-layout {
  display: flex;
  overflow: hidden;
  &__left {
    width: 240px;
    h2 {
      font-size: 24px;
    }
    ul {
      margin-top: 20px;
      li {
        padding: 10px 0;
        padding-left: 10px;
        font-size: 20px;
        box-sizing: border-box;
        // &:hover {
        //   cursor: pointer;
        // }
        a {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .left-active {
        background-color: #ebebeb;
        position: relative;
        color: $primary;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 4px;
          background-color: $primary;
        }
      }
    }
  }
  &__right {
    flex: 1;
    margin-left: 20px;
    overflow: hidden;
    font-size: 18px;
    line-height: 40px;
    img {
      width: 100%;
      height: 165px;
      object-fit: cover;
    }
  }
}
</style>
